<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="demo-ruleForm"
    >
      <el-form-item label="方案名称" prop="name">
        <el-input v-model="ruleForm.name" :disabled="disableFlag"></el-input>
      </el-form-item>
      <el-form-item label="落地页类别" prop="category">
        <el-radio-group v-model="ruleForm.category" :disabled="disableFlag||Boolean(ruleForm.id)" @change="changeCategory" >
          <el-radio :label="0">自研落地页</el-radio>
          <el-radio :label="1">非自研落地页</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="接量范围" prop="teacherAll">
        <el-radio-group v-model="ruleForm.teacherAll" @input="changeTeacher" :disabled="disableFlag||cantTeacher||isOther">
          <el-radio :label="1">全部老师</el-radio>
          <el-radio :label="0">指定老师</el-radio>
        </el-radio-group>
        <el-form-item>
          <el-transfer
            v-model="ruleForm.teacher_ids"
            :data="teachers"
            :titles="['用户列表', '接量老师名单']"
            filterable
            :filter-method="filterMethod"
            filter-placeholder="请输入老师名称"
            v-if="ruleForm.teacherAll == 0"
            :disabled="disableFlag"
          ></el-transfer>
        </el-form-item>
      </el-form-item>
      <el-form-item label="新增老师自动添加" prop="auto_flag">
        <el-radio-group v-model="ruleForm.auto_flag" :disabled="disableFlag||isOther">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="接量状态默认" prop="default_status">
        <el-radio-group v-model="ruleForm.default_status" :disabled="Boolean(ruleForm.id)||disableFlag||isOther" >
          <el-radio :label="1">开启</el-radio>
          <el-radio :label="0">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div style="text-align: center" v-if="!disableFlag">
      <el-button @click="resetForm('ruleForm')">取消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
    </div>
  </div>
</template>
<script>
import { getOptionListT, projGetInfo,addProj,updateProj } from "@/api/programme.js";
export default {
  props: {
    editOne: {},
    disableFlag:{}
  },
  data() {
    return {
      filterMethod(query, item) {
          return item.label.indexOf(query) > -1;
        },
      teachers: [],
      copyTecherids: [],
      cantTeacher:false,
      isOther:false,
      ruleForm: {
        name: "",
        category: 0,
        teacher_ids: [],
        teacherAll: 1,
        auto_flag: 1,
        default_status: 1,
      },
      rules: {
        name: [
          { required: true, message: "请输入方案名称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        category: [
          { required: true, message: "请选择落地页类型", trigger: "change" },
        ],
        auto_flag: [
          {
            required: true,
            message: "请选择新增老师自动添加",
            trigger: "change",
          },
        ],
        default_status: [
          { required: true, message: "请选择默认状态", trigger: "change" },
        ],
        teacherAll: [
          {
            required: true,
            message: "请选择接量老师是否为全部",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    changeCategory(e){
      console.log(e);
      if(e==1){
        this.ruleForm.teacherAll = 1
        this.ruleForm.default_status=0
        this.isOther=true
      }
      else{
        this.isOther=false
      }
    },
    getTeachers(){
     return new Promise((resolve, reject) => {
        getOptionListT().then((res) => {
      let teachers = res.data;
      teachers.forEach((ele) => {
        this.teachers.push({
          key: ele.id,
          label: ele.wechat_name,
          disabled:this.disableFlag
        });
      });
      resolve()
      });
      });
    },
    changeTeacher(e) {
      this.ruleForm.teacherAll = e;
      this.ruleForm.teacher_ids = [];
      if (e == 1) {
        this.teachers.forEach((ele) => {
          this.ruleForm.teacher_ids.push(ele.key);
        });
      } else {
        this.ruleForm.teacher_ids = this.copyTecherids;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.ruleForm.teacher_ids.length==0){
            this.$message.error('请至少选择一个接量老师');
            return
          }
          if (this.ruleForm.id) {
            let obj = {
              id: this.ruleForm.id,
              name: this.ruleForm.name,
              category: this.ruleForm.category,
              teacher_ids: this.ruleForm.teacher_ids,
              auto_flag: this.ruleForm.auto_flag,
              default_status: this.ruleForm.default_status,
            };
            updateProj(obj).then(res=>{
              this.$message.success('修改成功');
              this.$emit('refresh')
            })

          } else {
            this.$confirm('保存后在【接量管理】控制接量范围的老师是否接量，后续老师仅能增加不能减少。', '温馨提示', {
          confirmButtonText: '确认增加',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let obj = {
              name: this.ruleForm.name,
              category: this.ruleForm.category,
              teacher_ids: this.ruleForm.teacher_ids,
              auto_flag: this.ruleForm.auto_flag,
              default_status: this.ruleForm.default_status,
            };
            addProj(obj).then(res=>{
              this.$message.success('添加成功');
              this.$emit('refresh')
            }).catch(res=>{
                  return
                })
         
        }).catch(() => {
       
        });
          
          }
         
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$emit("refresh");
    },
  },
  watch: {
    disableFlag(newV){
      this.teachers.forEach(ele => {
            ele.disabled=newV
          });
    },
    editOne(newV) {
      if (newV.id) {
        this.ruleForm.id = newV.id;
        this.ruleForm.name = newV.name;
        this.ruleForm.category = newV.category;
        this.ruleForm.auto_flag = newV.auto_flag;
        this.ruleForm.default_status = newV.default_status;
        this.isOther= newV.category==1?true:false
       projGetInfo({id:this.editOne.id}).then((res) => {
          this.ruleForm.teacher_ids = res.data.teacher_ids
            ? res.data.teacher_ids
            : [];
          if (this.ruleForm.teacher_ids.length == this.teachers.length) {
            this.ruleForm.teacherAll = 1;
            this.cantTeacher=true
          } else {
            this.ruleForm.teacherAll = 0;
            this.cantTeacher=false
          }
          this.copyTecherids = res.data.teacher_ids
            ? res.data.teacher_ids
            : [];
          this.copyTecherids.forEach(ele => {
          this.teachers.forEach(el => {
            if(ele==el.key){
              el.disabled=true
            }
          });
        });  
        });
      }
      else{
        this.teachers.forEach(el => {
            this.ruleForm.teacher_ids.push(el.key)
        });
      }
    },
  },
  async created() {
    await this.getTeachers()
    if (this.editOne.id) {
      this.ruleForm.id = this.editOne.id;
      this.ruleForm.name = this.editOne.name;
      this.ruleForm.category = this.editOne.category;
      this.ruleForm.auto_flag = this.editOne.auto_flag;
      this.ruleForm.default_status = this.editOne.default_status;
      this.isOther= this.editOne.category==1?true:false
      projGetInfo({id:this.editOne.id}).then((res) => {
        this.ruleForm.teacher_ids = res.data.teacher_ids
          ? res.data.teacher_ids
          : [];
        if (this.ruleForm.teacher_ids.length == this.teachers.length) {
          console.log(this.ruleForm.teacher_ids.length == this.teachers.length);
          this.ruleForm.teacherAll = 1;
          this.cantTeacher=true
        } else {
          this.ruleForm.teacherAll = 0;
          this.cantTeacher=false
        }
        this.copyTecherids = res.data.teacher_ids ? res.data.teacher_ids : [];
        this.copyTecherids.forEach(ele => {
          this.teachers.forEach(el => {
            if(ele==el.key){
              el.disabled=true
            }
          });
        });        
      });
    }
    else{
      this.teachers.forEach(el => {
            this.ruleForm.teacher_ids.push(el.key)
        });
    }
    
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-radio__original {
  display: none !important;
}

::v-deep
  .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
  .el-radio__inner {
  box-shadow: none !important;
}
</style>
